<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="obj = { name:'andy', age:99 }">修改obj指向</button>
        <button @click="obj.name = 'rose' ">修改对象的name</button>
        <button @click="obj.age = 333 ">修改对象的age</button>
        <button @click="obj.height = 222 ">修改对象的height</button>

        <p>
            {{ obj.name  }} -- {{ obj.age }}
        </p>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                obj: {
                    name: 'jack',
                    age: 16,
                    height: 185,
                    sex: '男'
                }
            },
            // 我想侦听到对象的改变来打印一句话
            watch: {
                // 对于对象而言，如果你只是改对象里的属性
                // 默认情况下是不会触发侦听器
                // 默认情况下你侦听对象，除非这个对象的指向变了才会触发
                obj (newVal, oldVal) {

                    console.log('对象改变了', newVal, oldVal)
                },

                // 如果我就是想侦听对象里属性的变化
                // 但是侦听器语法规则里，如果要侦听对象里的某个属性，一定要用引号包起来
                'obj.name' (newVal, oldVal) {

                    console.log('name属性改变了', newVal, oldVal)
                },
                // 如果我还想侦听obj里所有属性的变化，但凡属性变了，就调用
                // 对象里如果有10个属性，难道我要分别写10次吗？？
                // 如果想侦听对象里任何属性的变化，可以用 深度侦听
                obj: {
                    // 开启深度侦听
                    deep: true,
                    // 当这个对象任何属性被修改都会调用的函数
                    handler (newVal, oldVal) {
                        // 当用了深度侦听后这里的两个参数没什么意义了
                        // 因为这里的两个参数都是指向obj
                        console.log('obj对象里有个属性被修改了',newVal, oldVal)
                    }
                }
            }
        })
    </script>
</body>
</html>